<template>
  <div class="app-container">
    <!-- <el-radio-group v-model="queryParams.type" style="margin-bottom: 30px;" @change="getList">
      <el-radio-button v-for="(item,index) in dict.type.notice_type" 
      :label="item.value" :key="index">{{item.label}}</el-radio-button>
    </el-radio-group> -->
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="auto" v-show="showSearch">
        <el-form-item label="支付应用" prop="appId">
          <el-input v-model="queryParams.appId" placeholder="请输入支付应用" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="通知类型" prop="type" >
          <el-select v-model="queryParams.type" placeholder="通知类型" clearable style="width: 200px">
            <el-option
              v-for="dict in dict.type.notice_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="数据id" prop="dataId">
          <el-input v-model="queryParams.dataId" placeholder="请输入数据id" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="商户订单id"  prop="merchantOrderId">
          <el-input v-model="queryParams.merchantOrderId" placeholder="请输入商户订单id" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="商户退款id"  prop="merchantRefundId">
          <el-input v-model="queryParams.merchantRefundId" placeholder="请输入商户退款id" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="商户转账id"  prop="merchantTransferId">
          <el-input v-model="queryParams.merchantTransferId" placeholder="请输入商户转账id" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="通知状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="支付状态" clearable style="width: 200px">
              <el-option
                v-for="dict in dict.type.notice_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="dateRange">
          <el-date-picker
            v-model="queryParams.dateRange"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="-" :clearable="false"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00','23:59:59']"
          ></el-date-picker>
        </el-form-item>

        <el-form-item >
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="list">
          <el-table-column label="id" align="center" prop="id"/>
          <el-table-column label="支付应用" align="center" prop="appName"/>
          <el-table-column label="通知类型" align="center" prop="type">
            <template slot-scope="{row}">
              <dict-tag :options="dict.type.notice_type" :value="row.type" />
            </template>
          </el-table-column>
          <el-table-column  label="商户单id" align="center" prop="merchantOrderId">
            <template slot-scope="{row}">
              <div v-if="row.merchantOrderId	">商户订单id：{{ row.merchantOrderId	 }}</div>
              <div v-if="row.merchantRefundId">商户退款id：{{ row.merchantRefundId	 }}</div>
              <div v-if="row.merchantTransferId">商户转账id：{{ row.merchantTransferId	 }}</div>
            </template>
          </el-table-column>
          <el-table-column label="通知状态" align="center" prop="status">
            <template slot-scope="{row}">
              <dict-tag :options="dict.type.notice_status" :value="row.status" />
            </template>
          </el-table-column>
          <el-table-column label="最后通知时间" align="center" prop="lastExecuteTime"/>
          <el-table-column label="下次通知时间" align="center" prop="nextNotifyTime"/>
          <el-table-column label="通知次数" align="center" prop="createTime">
            <template slot-scope="{row}">
              {{row.notifyTimes}} / {{row.maxNotifyTimes}}
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-button
                type="text"
                @click="handleDetail(row)"
                v-hasPermi="['pay:order:query']">查看详情</el-button>
            </template>
          </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <!-- 查看详情对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
      <el-form ref="formRef" :model="form" label-width="100px">
        <el-row class="diy-text-sm diy-leading-10" :gutter="10">
          <el-col :span="item.span || 12" v-for="(item,index) in formDetail" :key="index">
            <div class="flex_hcneter">
              <svg-icon icon-class="dot" class-name='diy-text-primary diy-mr-1'/>
              <div v-if="item.zidian && item.isCustom" class="flex_hcneter">
                {{item.label}}：<dict-tag :options="dict.type[item.zidian]" :value="form[item.prop]"/>
              </div>
              <div v-else-if="item.isCustom" class="flex_hcneter">
                <div v-if="item.prop == 'merchantOrderId'">
                  <div v-if="form.merchantOrderId">商户订单id：{{ form.merchantOrderId }}</div>
                  <div v-if="form.merchantRefundId">商户退款id：{{ form.merchantRefundId }}</div>
                  <div v-if="form.merchantTransferId">商户转账id：：{{ form.merchantTransferId }}</div>
                </div>
                <div v-if="item.prop == 'notifyTimes'">
                  {{item.label}}：{{form.notifyTimes}}/{{form.maxNotifyTimes}}
                </div>
              </div>
              <div v-else>{{item.label}}：{{ form[item.prop] }}{{ item.danwei || '' }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row class="diy-text-sm diy-leading-10" :gutter="10" v-if="form.logs">
          <h2>操作日志</h2>
          <el-col :span="24">
            <el-table :data="form.logs">
              <el-table-column label="id" align="center" prop="id" width="100px"/>
              <el-table-column label="通知状态" align="center" prop="status">
                <template slot-scope="{row}">
                  <dict-tag :options="dict.type.notice_status" :value="row.status" />
                </template>
              </el-table-column>
              <el-table-column label="通知次数" align="center" prop="notifyTimes" width="100px"/>
              <el-table-column label="通知时间" align="center" prop="createTime"/>
              <el-table-column label="响应结果" align="center" prop="response" show-overflow-tooltip/>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script >
import {listNotify,getDetail} from "@/api/finance/callbNotifList";
export default {
name: 'CallbNotifList',
dicts: ['notice_status','notice_type',],
components: {  },
data() {
  return {
    // 遮罩层
    loading: true,
    // 显示搜索条件
    showSearch: true,
    queryParams: {// 查询参数
      pageNum: 1,
      pageSize: 10,
      dateRange:[],
    },
    // 总条数
    total: 0,
    list:[],//页面数据
    form: {},// 表单参数
    // 弹出层标题
    title: "",
    // 是否显示弹出层
    open: false,
    formDetail:[
      {label:'支付应用',prop:'appName',},{label:'商户单id',prop:'merchantOrderId',isCustom:true,span:24,},
      {label:'关联id',prop:'dataId',},{label:'通知类型',prop:'type',zidian:'notice_type',isCustom:true,},
      {label:'通知状态',prop:'status',zidian:'notice_status',isCustom:true,},{label:'最后通知时间',prop:'lastExecuteTime',},
      {label:'下次通知时间',prop:'nextNotifyTime',},{label:'通知次数',prop:'notifyTimes',isCustom:true,},{label:'创建时间',prop:'createTime',},
      // {label:'操作日志',prop:'logs',},
      // {label:'日志id',prop:'logs.id',},{label:'日志通知状态',prop:'logs.status',zidian:'notice_status',isCustom:true,},
      // {label:'日志通知次数',prop:'logs.notifyTimes',},{label:'日志通知时间',prop:'logs.createTime',},{label:'日志响应结果',prop:'logs.response',span:24,},
    ],
  };
},
mounted(){
  this.getList()
},
methods: {
  showchart(e){//显示商户id
    let merchantId = null
    if(e.type == 1 || e.type == 4 || e.type == 5) merchantId = e.merchantOrderId
    if(e.type == 2) merchantId = e.merchantRefundId
    if(e.type == 3) merchantId = e.merchantTransferId
    return merchantId
  },
  handleDetail(row) {//查看详情
    const id = row.id
    this.open = true;
    this.title = "查看详情";
    getDetail(id).then(async response => {
      let data = response.data || {}
      this.form = {
        ...data,
        price: this.math.divide(data.price || 0,100),
        refundPrice: this.math.divide(data.refundPrice || 0,100),
      }
    });
  },
  getList() {
    this.loading = true;
    let queryParams = {...this.queryParams}
    let dateRange = queryParams.dateRange || []
    if(dateRange.length) {
      queryParams.startTime = dateRange[0]
      queryParams.endTime = dateRange[1]
    }
    if(queryParams.type == 1 || !queryParams.type) queryParams.merchantOrderId = queryParams.merchantId
    if(queryParams.type == 2 || !queryParams.type) queryParams.merchantRefundId = queryParams.merchantId
    if(queryParams.type == 3 || !queryParams.type) queryParams.merchantTransferId = queryParams.merchantId
    delete queryParams.dateRange
    listNotify(queryParams).then(response => {
      let rows = response.rows || [];
      this.list = rows.map(item=>{
        return {
          ...item,
          price: this.math.divide(item.price || 0,100),
          refundPrice: this.math.divide(item.refundPrice || 0,100),
        }
      })
      this.total = response.total || 0;
      this.loading = false;
    });
  },
  /** 搜索按钮操作 */
  handleQuery() {
    this.queryParams.pageNum = 1;
    this.getList();
  },
  /** 重置按钮操作 */
  resetQuery() {
    this.queryParams = {// 查询参数
      pageNum: 1,
      pageSize: 10,
    }
    this.resetForm("queryRef");
    this.handleQuery();
  },
}
}
</script>
